import React from 'react';
import { motion } from 'framer-motion';

const Terms: React.FC = () => {
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
      <motion.div 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-8"
      >
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-4">使用条款</h1>
          <p className="text-gray-600 dark:text-gray-400">最后更新日期：2024年12月</p>
        </div>

        <div className="prose prose-gray dark:prose-invert max-w-none">
          <section className="mb-8">
            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">1. 服务说明</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              KZ-DevOps 是一个专业的项目管理平台，为用户提供项目跟踪、任务管理、缺陷跟踪等服务。
            </p>
          </section>

          <section className="mb-8">
            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">2. 用户责任</h2>
            <ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2">
              <li>用户需保证提供的信息真实、准确、完整</li>
              <li>用户不得利用平台进行任何非法活动</li>
              <li>用户需妥善保管账户信息，对账户下所有操作负责</li>
              <li>用户不得干扰或破坏平台的正常运行</li>
            </ul>
          </section>

          <section className="mb-8">
            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">3. 知识产权</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              平台的所有内容，包括但不限于文字、图形、标识、软件等，均受知识产权法保护。
            </p>
          </section>

          <section className="mb-8">
            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">4. 服务变更与终止</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              我们保留随时修改、暂停或终止服务的权利，恕不另行通知。
            </p>
          </section>

          <section className="mb-8">
            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">5. 免责声明</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              平台按"现状"提供，不提供任何明示或暗示的担保。用户使用平台的风险由用户自行承担。
            </p>
          </section>

          <section className="mb-8">
            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">6. 法律适用</h2>
            <p className="text-gray-600 dark:text-gray-400 mb-4">
              本条款的订立、执行和解释均适用中华人民共和国法律。
            </p>
          </section>

          <section>
            <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">7. 联系我们</h2>
            <p className="text-gray-600 dark:text-gray-400">
              如对本使用条款有任何疑问，请通过意见反馈页面联系我们。
            </p>
          </section>
        </div>
      </motion.div>
    </div>
  );
};

export default Terms;